<template>
  <Table :dataSource="dataSource" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <span v-per="'update'">
          <a @click="handleEdit(record)"> 编辑 </a>
        </span>
      </template>
    </template>
  </Table>
  <br />
  <Pagination
    show-size-changer
    v-model:current="current"
    v-model:pageSize="pageSize"
    :total="total"
    :show-total="(total) => `共 ${total} 条`"
    @showSizeChange="onShowSizeChange"
  />
  <EditIam ref="modelRef" @success="update"></EditIam>
</template>
<script setup lang="ts">
import { Table, Pagination } from 'ant-design-vue';
import { columns } from './iam.data';
import { getSaaSIamList } from '/@/api/system-mgmt/system';
import { ref, watch } from 'vue';
import EditIam from './component/editIam.vue';
const total = ref();
const current = ref(1);
const pageSize = ref(10);
const scroll = ref<undefined | object>(undefined);
const dataSource = ref();
const loading = ref(true);
let params = {
  current: current.value,
  size: pageSize.value,
};
//获取事件列表
const getDataSource = async () => {
  try {
    let data = await getSaaSIamList(params);
    dataSource.value = data.items;
    total.value = data.total;
  } finally {
    loading.value = false;
  }
};
getDataSource();
const onShowSizeChange = (current: number, pageSize: number) => {
  params.size = pageSize;
  params.current = current;
  getDataSource();
};
watch(pageSize, (val) => {
  if (val > 10) {
    scroll.value = { y: 500 };
  }
  params.size = pageSize.value;
});
watch(current, () => {
  params.current = current.value;
  getDataSource();
});

const modelRef = ref();
function handleEdit(record: Recordable) {
  modelRef.value.showModal(record);
}
const update = () => {
  getDataSource();
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
